<template>
  <t-layout class="wrapper">
    <t-aside class="aside">
        <div class="vertex-shader code-box">
            <CodeEditor key="vertex" name="顶点着色器代码" v-model:code="vertexCode" />
        </div>
        <div class="fragment-shader code-box">
            <CodeEditor key="fragment" name="片元着色器代码" v-model:code="fragmentCode" />
        </div>
    </t-aside>
    <t-layout style="background: #333;">
        <t-content>
            <div class="shader-comp-wrap">
                <ShaderComponent :vertex-shader="vertexCode" :fragment-shader="fragmentCode" />
            </div>
        </t-content>
        <t-footer>fff</t-footer>
    </t-layout>
  </t-layout>
</template>
<script>
export default { name: "ShaderEditor" };
</script>
<script setup>
import CodeEditor from "@/components/CodeEditor"
import ShaderComponent from "@/components/ShaderComponent.vue";

import { ref, watch } from "vue";
const vertexCode = ref(`
  varying vec2 vUv;
  void main() {
    vUv = uv;
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
`);
const fragmentCode = ref(`  
  varying vec2 vUv;
  void main() {
    // 背景是紫色，只有0.4~0.6之间渐变到红色
    gl_FragColor = vec4(vUv.x, vUv.y, 1.0, 1.0);
    gl_FragColor.r += 0.4;
    gl_FragColor.g += 0.4;
  }
`);

watch(vertexCode, (newValue) => {
    console.log('顶点着色器变动 ----->', vertexCode.value);
})

</script>
<style scoped>
.wrapper {
    height: 100vh;
    flex-direction: row;
    background-color: #333;
}
.wrapper .aside {
    height: 100%;
    width: 800px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background-color: #2d2f33;
}
.wrapper .aside .code-box {
    flex: 1;
}
.shader-comp-wrap {
    box-sizing: border-box;
    padding: 50px;
}
</style>